<template>
	<div class="drawer-box">
		<div class="content scroll">
			<div class="replace-info-item" v-for="(item, index) in replaceInfo" :key="item.new">
				<div class="old">
					<span class="label">旧：</span>
					<span class="text" v-html="item.old"></span>
				</div>
				<div class="new">
					<span class="label">新：</span>
					<span class="text" v-html="item.new"></span>
				</div>
				<div class="remove">
					<i data-v-b5652306="" class="iconfont icon-yuyinguanbi" @click="remove(index)"></i>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="left">
				<span class="result">匹配到 {{ mode2Store.replaceInfo.length }} 个结果</span>
			</div>
			<div class="right">
				<span class="count">当前 {{ replaceInfo.length }} 条替换</span>
				<el-button type="primary" :disabled="workOngoing || replaceInfo.length === 0" @click="replace">
					替换
				</el-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { API } from '@v/utils/API';
import { rootMixin } from '@v/mixin';
import { reactive, watch } from 'vue';
import { useMode2Store } from '@v/store/mode/mode2';
import { ReplaceInfo } from '@p/main-windowObject';
import { useRootStore } from '@v/store';
import { ReplaceOptions } from '@type/replace';

const store = useRootStore();

const { workOngoing } = rootMixin();

const mode2Store = useMode2Store();

const replaceInfo = reactive<ReplaceInfo[]>([]);

watch(
	() => mode2Store.replaceInfo,
	(newval) => {
		replaceInfo.splice(0, replaceInfo.length);
		replaceInfo.push(...JSON.parse(JSON.stringify(newval)));
	},
	{ immediate: true }
);

function remove(i: number) {
	replaceInfo.splice(i, 1);
}

function replace() {
	const replaceList: ReplaceOptions = replaceInfo.map((item) => {
		return {
			target: item.target,
			substituted: item.substituted,
			directReplace: true,
		};
	});

	store.setWork(true, 'mode2');
	API.invoke('mode2', replaceList);
}
</script>

<style scoped lang="scss">
.drawer-box {
	background-color: var(--fill-color-5);
	width: 800px;
	max-width: 100%;
	height: 100%;
	--bottom-height: 50px;
	.content {
		height: calc(100% - var(--bottom-height));
		.replace-info-item {
			width: auto;
			margin: 6px 6px 0 6px;
			padding: 10px 15px;
			background-color: var(--opacity-purity-color-4);
			overflow: hidden;
			font-size: 14px;
			position: relative;
			border-radius: 4px;
			&:last-child {
				margin: 6px;
			}
			&:hover {
				background-color: var(--opacity-purity-color-8);
			}
			.new,
			.old {
				display: flex;
				& > .label {
					user-select: none;
				}
				& > .text {
					display: inline;
				}
			}
			.new {
				& > .text {
					color: var(--text-color-2);
				}
				& > .label,
				:deep(.mark) {
					color: var(--theme-success-color);
				}
			}
			.old {
				margin-bottom: 4px;
				& > .text {
					color: var(--text-color-3);
				}
				& > .label,
				:deep(.mark) {
					color: var(--theme-danger-color);
				}
			}
			:deep(.mark) {
				border-radius: 2px;
				background-color: var(--opacity-purity-color-14);
			}
			.remove {
				position: absolute;
				right: 0;
				top: 0;
				width: 60px;
				height: 100%;
				background: linear-gradient(to right, transparent 0%, #ea2027 100%);
				transition: 0.2s;
				transform: translateX(100%);
				display: flex;
				align-items: center;
				justify-content: center;
				.iconfont {
					transform: translateX(calc(40% - 6px));
					padding: 6px;
					&:hover {
						color: var(--theme-main-color);
						cursor: pointer;
					}
				}
			}
			&:hover .remove {
				transform: translateX(0);
			}
		}
	}
	.bottom {
		height: var(--bottom-height);
		box-sizing: border-box;
		border-top: 1px solid var(--border-color-3);
		display: flex;
		padding: 0 15px;
		& > div {
			display: flex;
			align-items: center;
		}
		.left {
			flex-grow: 1;
			.result {
				font-size: 14px;
			}
		}
		.right {
			.count {
				margin-right: 10px;
				display: inline-block;
				font-size: 14px;
			}
		}
	}
}
</style>
